<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>45-jQuery的stop和delay方法</title>
    <style>
        *{
             margin: 0;
             padding: 0;
        }
        .one{
            width: 100px;
            height: 100px;
            background: red;
        }
        .two{
            width: 500px;
            height: 10px;
            background: blue;
        }
    </style>
    <script src="jQuery/jquery-3.4.1.js"></script>
    <script>
         $(function () {
             $("button").eq(0).click(function () {
                //$(".one").animate({width:500},1000).delay(1000).animate({height:500},1000);
                 $(".one").animate({
                     width:500
                 },1000).animate({
                     height:500
                 },1000);
                 $(".one").animate({
                     width:100
                 },1000).animate({
                     height:100
                 },1000);
             });
             $("button").eq(1).click(function () {
                //立即停止当前动画，继续执行后续动画
                 //$("div").stop();
                //$("div").stop(false);
                //$("div").stop(false,false);

                 //立即停止所有动画
                //$("div").stop(true);
                //$("div").stop(true,false);

                 //立即完成当前的，继续执行后续的
                 $("div").stop(false,true);

                 //立即完成当前的停止执行后续的
                 $("div").stop(true,true);
             });
         })
    </script>
</head>
<body>
<button>开始动画</button>
<button>停止动画</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>